<!-- 搜索人员 -->
<template>
	<view class="text-edit">
		<view class="" @click="onClick">
			<u--input :placeholder="placeholder" :placeholderClass="placeholderClass" :placeholderStyle="placeholderStyle"
				:inputAlign="inputAlign" :fontSize="fontSize" :color="color" :prefixIcon="prefixIcon"
				:prefixIconStyle="prefixIconStyle" :suffixIcon="suffixIcon" :suffixIconStyle="suffixIconStyle"
				:border="border" :shape="shape" :customStyle="customStyle" v-model="title" disabled
				:disabledColor="disabledColor"></u--input>
		</view>
		<u-popup class="form-popup" mode="right" :show="showPopup" @close="close" @open="open">
			<view>
				<u-navbar :title="pageTitle" @leftClick="close" style="color: #fff;" bgColor="#1E6FFF"></u-navbar>
				<view :style="'height:' + getSafeAreaTop() + 'px'" style="color: red; width: 750rpx;"></view>
				<view class="approval">
					<u--textarea v-model="title" :placeholder="placeholder" count :maxlength="maxLen" height="140"
						border="none" :confirmType="null" @keyboardheightchange="keyboardheightchange($event)">
					</u--textarea>
					<view class="approval_buttons">
						<view class="btn2" @click="onConfirm">
							<view :style="{ background: title ? '#1E6FFF' : 'rgba(30, 111, 255, 0.49)' }"
								style="width: 100%;">
								确 定
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '', // 选中的标题名称
			isClick: false,
			showPopup: false,
			valueCache: ''
		}
	},
	model: {
		prop: 'value',
		event: 'change',
	},
	props: {
		// 编号（不知道啥玩意后台没有备注）
		commercialType: {
			type: [String, Number],
			default: ''
		},
		// 是否为多选 默认单选
		isMulti: {
			type: [Boolean],
			default: false
		},
		// 对象字段
		objectField: {
			type: [String],
			default: ' sicForm.yzdw'
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 选中的值
		value: {
			type: [String, Number],
			default: '',
		},
		// 输入框为空时的占位符
		placeholder: {
			type: [String, Number],
			default: '请选择',
		},
		// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
		placeholderClass: {
			type: [String],
			default: '',
		},
		// 指定placeholder的样式，字符串/对象形式，如"color: red;"
		placeholderStyle: {
			type: [String, Object],
			default: 'color: #C0C4CC'
		},
		// 输入框内容对齐方式 - left | center | right
		inputAlign: {
			type: [String,],
			default: 'left',
		},
		// 输入框字体的大小
		fontSize: {
			type: [String, Number],
			default: '15px',
		},
		// 输入框字体颜色
		color: {
			type: [String],
			default: '#303133',
		},
		// 输入框前置图标
		prefixIcon: {
			type: [String],
			default: '',
		},
		// 前置图标样式，对象或字符串
		prefixIconStyle: {
			type: [String, Object],
			default: '',
		},
		// 输入框前置图标
		suffixIcon: {
			type: [String],
			default: '',
		},
		// 前置图标样式，对象或字符串
		suffixIconStyle: {
			type: [String, Object],
			default: '',
		},
		// 边框类型，surround-四周边框，bottom-底部边框，none-无边框
		border: {
			type: [String],
			default: 'surround',
		},
		// 输入框形状，circle-圆形，square-方形
		shape: {
			type: [String],
			default: 'square',
		},
		customStyle: {
			type: [Object],
			default: () => { },
		},
		maxLen: {
			default: 500
		},
		pageTitle: {
			type: String,
			default: '标题'
		}
	},
	watch: {
		// 监听value是否有值
		value: {
			handler(val, oldVal) {
				if (val) {
					this.title = val
				} else {
					this.title = ''
				}
				// if (oldVal) {
				// 	this.$emit('change',val);
				// }
			},
			immediate: true,
		}
	},
	created() {
		this.valueCache = this.value
	},
	computed: {
		// 当是disabled为true改变禁用的颜色
		disabledColor() {
			if (this.disabled) {
				return '#f5f7fa'
			} else {
				return '#FFFFFF'
			}
		}
	},
	methods: {
		open() {
		},
		close() {
			this.showPopup = false
			this.title = this.valueCache
			this.$emit('cancel', this.valueCache)
		},
		onConfirm() {
			this.$emit('input', this.title || '')
			this.showPopup = false
		},
		// 获取safeArea
		getSafeAreaTop() {
			var top = 44
			return top
		},
		// 获取safeArea
		getScorollHeight() {
			let height = uni.getStorageSync('getSystemInfo').screenHeight - (uni.getStorageSync('getSystemInfo')
				?.safeArea?.top || 0) - (uni.getStorageSync('getSystemInfo')?.statusBarHeight || 0) - 44 - 32
			return height
		},
		onClick() {
			if (this.disabled) return
			this.showPopup = true
		},
		keyboardheightchange(e) {
			console.log(e)
		}
	},
	mounted() { },
}
</script>

<style lang="scss" scoped>
.text-edit {
	width: 100%;
	height: 100%;
	background-color: #fff;
}

.approval {
	margin-top: 54px;
	width: 100%;
	height: 100%;
	background-color: #fff;

	.u-textarea {
		padding: 32rpx;
	}


	.approval_buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx 36rpx;
		display: flex;
		border-top: 2rpx solid #F2F2F2;
		z-index: 0;

		view {
			// width: 328rpx;
			width: 100%;
			height: 80rpx;
			border-radius: 5px;
			line-height: 80rpx;
			text-align: center;
		}

		.btn2 {
			background: rgba(30, 111, 255, 0.49);
			font-size: 17px;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}

::v-deep .u-icon__icon {
	color: #fff !important;
}

::v-deep .u-navbar__content__title {
	color: #fff;
}
</style>